<template>
    <div class="xtx-checkbox" @click="changeChecked()">
        <i v-if="checked" class="iconfont icon-checked"></i>
        <i v-else class="iconfont icon-unchecked"></i>
        <span v-if="$slots.default"><slot /></span>
    </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useVModel } from '@vueuse/core';
export default {
    // v-model ===> :modelValue +  @update:modelValue
    name: "XtxCheckbox",
    props:{
        modelValue:{
            type:Boolean,
            default:false
        }
    },
    setup(props,{emit}) {
        // const checked = ref(false)
        // const changeChecked =() =>{
        //     checked.value = !checked.value
        //     emit('update:modelValue',checked.value)
        // }
        // // 监听父组件传递的数据 赋值给子组件 
        // watch(()=>props.modelValue,(newVal)=>{
        //     checked.value = props.modelValue
        // },{immediate:true})
        // return{
        //     checked,
        //     changeChecked
        // }
        // -------------使用vueuse--------------
        const checked = useVModel(props,'modelValue',emit)
        const changeChecked =() =>{
            const newVal = !checked.value
            checked.value = newVal
            // 让组件支持change事件
            emit('change',newVal)
        }
        return{
            checked,
            changeChecked
        }
    },
};
</script>

<style scoped lang="less">
.xtx-checkbox {
    display: inline-block;
    margin-right: 2px;
    .icon-checked {
        color: @xtxColor;
        ~ span {
            color: @xtxColor;
        }
    }
    i {
        position: relative;
        top: 1px;
    }
    span {
        margin-left: 2px;
    }
}
</style>